<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
    title: {
      type: String,
      default: "图表",
    },
    series: {
      type: Array,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  watch: {
    series: {
      deep: true,
      handler(val) {
        this.selfSetOption();
      },
    },
  },
  methods: {
    color16() {
      //十六进制颜色随机
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      var color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
      return color;
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      this.selfSetOption();
    },
    resetChart() {
      if (this.chart) {
        this.chart.clear();
        this.selfSetOption();
        this.chart.resize();
      } else {
        this.initChart();
      }
    },
    selfSetOption() {
      const seriesData = this.series.map((serie, index) => {
        return {
          type: "pie",
          data: serie.data,
          radius: ["40%", "70%"],
          itemStyle: {
            borderRadius: 5,
            borderColor: "#fff",
            borderWidth: 2,
          },
          emphasis: {
            label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
          },
        };
      });
      const option = {
        title: {
          text: this.title,
          textStyle: {
            fontWeight: "bold",
            fontSize: 18,
            color:this.selfScss.titleColor,
          },
          left: "center",
        },
        color: [
          "#4DAEF5",
          "#5DD7D1",
          "#BAE5F6",
          "#F8E7BB",
          "#AD91D9",
          "#7BE0B8",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
          "#801dae",
        ],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
          right: "5%",
          top: "5%",
        },
        tooltip: {
          trigger: "item",
          formatter: function (p) {
            let str = `
              <div>${p.name}</div>
              <div>${p.marker} ${p.value}(${p.percent}%)</div>
              `;
            return str;
          },
        },
        legend: {
          orient: "vertical",
          top: "5%",
          left: "5%",
          itemWidth: 20,
          itemGap: 20,
          textStyle: {
            color: "#67729d",
          },
          type: "scroll",
        },
        series: seriesData,
        label: {
          show: true,
          formatter: "{b} : {c} ({d}%)",
        },
      };
      this.chart.setOption(option);
    },
  },
};
</script>
